<template>
  <view 
    class="stat-card" 
    :class="[
      `stat-card--${type}`,
      { 'stat-card--clickable': clickable }
    ]"
    @click="handleClick"
  >
    <!-- 图标区域 -->
    <view class="stat-card__icon" :class="`stat-card__icon--${type}`">
      <u-icon 
        :name="icon" 
        :size="iconSize" 
        :color="iconColor"
      ></u-icon>
    </view>
    
    <!-- 内容区域 -->
    <view class="stat-card__content">
      <view class="stat-card__value">{{ formatValue(value) }}</view>
      <view class="stat-card__label">{{ label }}</view>
      
      <!-- 变化趋势 -->
      <view v-if="change !== undefined" class="stat-card__change">
        <view 
          class="stat-card__change-value" 
          :class="[
            change > 0 ? 'stat-card__change-value--up' : 
            change < 0 ? 'stat-card__change-value--down' : 
            'stat-card__change-value--neutral'
          ]"
        >
          <u-icon 
            v-if="change !== 0"
            :name="change > 0 ? 'arrow-up' : 'arrow-down'" 
            size="20rpx"
          ></u-icon>
          <text>{{ Math.abs(change) }}%</text>
        </view>
        <text class="stat-card__change-label">{{ changeLabel || $t('stat.vsLastPeriod') }}</text>
      </view>
    </view>
    
    <!-- 额外信息 -->
    <view v-if="$slots.extra" class="stat-card__extra">
      <slot name="extra"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  // 统计类型
  type?: 'primary' | 'success' | 'warning' | 'error' | 'info'
  // 图标
  icon: string
  // 数值
  value: number | string
  // 标签
  label: string
  // 变化百分比
  change?: number
  // 变化标签
  changeLabel?: string
  // 是否可点击
  clickable?: boolean
  // 数值格式化类型
  valueType?: 'number' | 'currency' | 'percentage'
  // 图标大小
  iconSize?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  clickable: false,
  valueType: 'number',
  iconSize: '48rpx'
})

interface Emits {
  click: []
}

const emit = defineEmits<Emits>()

// 图标颜色
const iconColor = computed(() => {
  const colorMap: Record<string, string> = {
    'primary': '#007AFF',
    'success': '#34C759',
    'warning': '#FF9500',
    'error': '#FF3B30',
    'info': '#5AC8FA'
  }
  return colorMap[props.type] || '#007AFF'
})

// 格式化数值
const formatValue = (value: number | string): string => {
  if (typeof value === 'string') return value
  
  switch (props.valueType) {
    case 'currency':
      return `¥${value.toLocaleString()}`
    case 'percentage':
      return `${value}%`
    case 'number':
    default:
      if (value >= 10000) {
        return `${(value / 10000).toFixed(1)}万`
      }
      return value.toLocaleString()
  }
}

// 点击事件处理
const handleClick = () => {
  if (props.clickable) {
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
.stat-card {
  background: var(--card-bg-color, #ffffff);
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  
  &--clickable {
    cursor: pointer;
    
    &:active {
      transform: scale(0.98);
    }
    
    &:hover {
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }
  }
  
  // 不同类型的边框样式
  &--primary {
    border-left: 6rpx solid var(--primary-color, #007AFF);
  }
  
  &--success {
    border-left: 6rpx solid var(--success-color, #34C759);
  }
  
  &--warning {
    border-left: 6rpx solid var(--warning-color, #FF9500);
  }
  
  &--error {
    border-left: 6rpx solid var(--error-color, #FF3B30);
  }
  
  &--info {
    border-left: 6rpx solid var(--info-color, #5AC8FA);
  }
}

.stat-card__icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &--primary {
    background: rgba(0, 122, 255, 0.1);
  }
  
  &--success {
    background: rgba(52, 199, 89, 0.1);
  }
  
  &--warning {
    background: rgba(255, 149, 0, 0.1);
  }
  
  &--error {
    background: rgba(255, 59, 48, 0.1);
  }
  
  &--info {
    background: rgba(90, 200, 250, 0.1);
  }
}

.stat-card__content {
  flex: 1;
  min-width: 0;
}

.stat-card__value {
  font-size: 48rpx;
  font-weight: 700;
  color: var(--text-color, #333333);
  line-height: 1.2;
  margin-bottom: 8rpx;
}

.stat-card__label {
  font-size: 28rpx;
  color: var(--text-color-secondary, #666666);
  font-weight: 500;
  margin-bottom: 16rpx;
}

.stat-card__change {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.stat-card__change-value {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 24rpx;
  font-weight: 600;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  
  &--up {
    color: var(--success-color, #34C759);
    background: rgba(52, 199, 89, 0.1);
  }
  
  &--down {
    color: var(--error-color, #FF3B30);
    background: rgba(255, 59, 48, 0.1);
  }
  
  &--neutral {
    color: var(--text-color-secondary, #666666);
    background: var(--bg-color-light, #f8f9fa);
  }
}

.stat-card__change-label {
  font-size: 22rpx;
  color: var(--text-color-tertiary, #999999);
}

.stat-card__extra {
  margin-left: auto;
  flex-shrink: 0;
}

// 响应式设计
@media (max-width: 750rpx) {
  .stat-card {
    padding: 24rpx;
    gap: 20rpx;
  }
  
  .stat-card__icon {
    width: 64rpx;
    height: 64rpx;
  }
  
  .stat-card__value {
    font-size: 40rpx;
  }
  
  .stat-card__label {
    font-size: 26rpx;
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .stat-card {
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-tertiary: #636366;
    --bg-color-light: #2c2c2e;
  }
}
</style>